import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import HelloWorld from "./components/helloworld";
import ReactQueryDemo from "./components/react-query-demo";
import TodoList from "./components/todolist/index.tsx";

// 创建 QueryClient 实例
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // 默认查询配置
      staleTime: 5 * 60 * 1000, // 5分钟
      cacheTime: 10 * 60 * 1000, // 10分钟
      retry: 3, // 重试3次
      refetchOnWindowFocus: false, // 窗口聚焦时不自动重新获取
    },
    mutations: {
      // 默认变更配置
      retry: 1, // 变更失败时重试1次
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
       <TodoList />
       
       
       
        {/* <HelloWorld name="guoguo" />
        <ReactQueryDemo /> */}
      </div>
      
      {/* React Query DevTools - 只在开发环境显示 */}
      <ReactQueryDevtools 
        initialIsOpen={false} 
        position="bottom-right"
        buttonPosition="bottom-right"
      />
    </QueryClientProvider>
  );
}

export default App;
